<script setup lang="ts">
import { ref } from "vue";
import MapArea from "./components/MapArea.vue";
import Section1 from "./components/Section1.vue";
import Section2 from "./components/Section2.vue";
import Section3 from "./components/Section3.vue";
import Section4 from "./components/Section4.vue";
import Section5 from "./components/Section5.vue";
import Section6 from "./components/Section6.vue";
import { useNowTime } from "@/hooks/useNowTime";
import { useCurrentEquip } from "./hooks/useCurrentEquip";
import { onEquipInited } from "@/utils/init";
import { equip1, equip2, equip3, equip4 } from "@/configs/equip";
import { datetimeFormat } from "@/utils/date";

const nowTime = useNowTime();
const currentEquip = useCurrentEquip();
const innerWidth = ref(0);
const innerHeight = ref(0);
init();
async function init() {
    function resize() {
        innerWidth.value = window.innerWidth;
        innerHeight.value = window.innerHeight;
    }
    resize();
    // 调整窗口大小时
    let timer = null as NodeJS.Timeout | null;
    window.addEventListener("resize", () => {
        timer && clearTimeout(timer);
        timer = setTimeout(() => resize(), 200);
    });
    await onEquipInited();
    currentEquip.setCurrentUnid(equip1.unid);
}
</script>

<template>
    <div class="index" :style="{ transform: 'scale(' + innerWidth / 1920 + ', ' + innerHeight / 1080 + ')' }">
        <MapArea />
        <Transition name="fade-left"><div v-show="currentEquip.currentUnid.value" class="mark-left"></div></Transition>
        <Transition name="fade-right"><div v-show="currentEquip.currentUnid.value" class="mark-right"></div></Transition>
        <Transition name="fade-bottom"><div v-show="currentEquip.currentUnid.value" class="mark-bottom"></div></Transition>
        <Transition name="fade-left"><Section1 v-show="currentEquip.currentUnid.value" class="section1" :detailV2="currentEquip.detailV2.value" /></Transition>
        <Transition name="fade-left-100"><Section2 v-show="currentEquip.currentUnid.value" class="section2" :detailV2="currentEquip.detailV2.value" /></Transition>
        <Transition name="fade-left-200"><Section3 v-show="currentEquip.currentUnid.value" class="section3" :detailV2="currentEquip.detailV2.value" /></Transition>
        <Transition name="fade-right"><Section4 v-show="currentEquip.currentUnid.value" class="section4" :detailV2="currentEquip.detailV2.value" /></Transition>
        <Transition name="fade-right-100"><Section5 v-show="currentEquip.currentUnid.value" class="section5" :detailV2="currentEquip.detailV2.value" /></Transition>
        <Transition name="fade-right-200"><Section6 v-show="currentEquip.currentUnid.value" class="section6" :detailV2="currentEquip.detailV2.value" /></Transition>
        <Transition name="fade-bottom-300">
            <footer v-show="currentEquip.currentUnid.value">
                <button :class="{ active: currentEquip.currentUnid.value === equip1.unid }" @click="currentEquip.setCurrentUnid(equip1.unid)">
                    <span>{{ equip1.title }}</span>
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-shuixiangshuiwei"></use></svg>
                </button>
                <button :class="{ active: currentEquip.currentUnid.value === equip2.unid }" @click="currentEquip.setCurrentUnid(equip2.unid)">
                    <span>{{ equip2.title }}</span>
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-shuixiangshuiwei"></use></svg>
                </button>
                <button :class="{ active: currentEquip.currentUnid.value === equip3.unid }" @click="currentEquip.setCurrentUnid(equip3.unid)">
                    <span>{{ equip3.title }}</span>
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-shuixiangshuiwei"></use></svg>
                </button>
                <button :class="{ active: currentEquip.currentUnid.value === equip4.unid }" @click="currentEquip.setCurrentUnid(equip4.unid)">
                    <span>{{ equip4.title }}</span>
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-shuixiangshuiwei"></use></svg>
                </button>
            </footer>
        </Transition>
        <header>
            <div class="left">
                <p><span>北京</span></p>
                <p>
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-duoyun"></use></svg>
                    <span>多云</span>
                </p>
                <p><span>21 - 26 ℃</span></p>
            </div>
            <h1>液氧储罐指挥中心</h1>
            <div class="right">
                <p>
                    <span>{{ datetimeFormat(nowTime.nowTime.value) }}</span>
                </p>
                <p>
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-shezhi"></use></svg>
                </p>
            </div>
        </header>
    </div>
</template>

<style scoped lang="scss">
@use "@/styles/vars" as *;
.index {
    position: relative;
    width: 1920px;
    height: 1080px;
    transform-origin: 0 0;
    background: radial-gradient(circle at 50% 50%, #a5a7e2 0%, #202539 100%);
    .mark-left {
        position: absolute;
        left: 0;
        top: 0;
        width: 450px;
        height: 100%;
        background: linear-gradient(to left, #20253900 0%, #202539 100%);
    }
    .mark-right {
        position: absolute;
        top: 0;
        right: 0;
        width: 450px;
        height: 100%;
        background: linear-gradient(to right, #20253900 0%, #202539 100%);
    }
    .mark-bottom {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 120px;
        background: linear-gradient(to bottom, #20253900 0%, #202539 100%);
    }
    footer {
        padding-bottom: 20px;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 120px;
        background: url("@/assets/images/footer.png") center 80% / 1300px 100px no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 20px;
        button {
            margin-bottom: 20px;
            padding-bottom: 26px;
            width: 100px;
            height: 110px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            background: url("@/assets/images/bottom.png") 0 bottom / 100% 30px no-repeat;
            transition: padding 0.2s, background 0.2s;
            span {
                flex-shrink: 0;
                font-size: 14px;
                color: #babbdf;
                font-weight: bold;
                transition: text-shadow 0.2s;
            }
            .icon {
                flex-shrink: 0;
                font-size: 42px;
                color: #babbdf;
            }
            &.active {
                padding-bottom: 46px;
                background: url("@/assets/images/bottom-active.png") 0 bottom / 100% 60px no-repeat;
                span {
                    color: #dadbe0;
                    text-shadow: 0 0 10px #fff;
                }
                .icon {
                    color: #dadbe0;
                }
            }
        }
    }
    header {
        position: absolute;
        left: 0;
        top: 0;
        box-sizing: border-box;
        padding: 0 30px;
        width: 100%;
        height: 66px;
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: url("@/assets/images/header.png") 0 0 / 100% 100%;
        .left,
        .right {
            width: 320px;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            column-gap: 20px;
            &.right {
                justify-content: flex-end;
            }
            p {
                display: flex;
                align-items: center;
                .icon {
                    margin-right: 4px;
                    font-size: 18px;
                    color: #cacbe4;
                }
                span {
                    color: #cacbe4;
                    font-size: 14px;
                }
            }
        }
        h1 {
            margin-top: -14px;
            flex: 1;
            color: #f5f9fa;
            font-size: 36px;
            font-weight: bold;
            letter-spacing: 6px;
            text-shadow: 0 3px 3px #202539;
        }
    }
    .section1 {
        left: 30px;
        top: 100px;
    }
    .section2 {
        left: 30px;
        top: 424px;
    }
    .section3 {
        left: 30px;
        top: 748px;
    }
    .section4 {
        left: 1466px;
        top: 100px;
    }
    .section5 {
        left: 1466px;
        top: 424px;
    }
    .section6 {
        left: 1466px;
        top: 748px;
    }
}
</style>
